<template>
    <div class="page_container">
       <el-row>
            <el-col :span="24">
                <div class="page_title">
                    <div class="pageTitleText"><span class="pageTitleTextH">福建那都通有限公司</span></div>
                    <div class="title_tip">(VIP认证名)</div>
                </div>            
            </el-col>
       </el-row> 
       <el-row type="flex" justify="space-between">
            <el-col :span="16">
                <el-row class="left_line">
                    <el-col :span="8">
                        <span class="colorRgba00085Blod">负责人：</span>
                        <span>{{info.true_name}}</span>            
                    </el-col>
                    <el-col :span="8">
                        <span class="colorRgba00085Blod">手机号码：</span>
                        <span>{{info.phone}}</span> 
                    </el-col>   
                    <el-col :span="8">
                        <span class="colorRgba00085Blod">创建时间：</span>
                        <span>{{parseTime(info.add_time,'{y}-{m}-{d} {h}:{i}')}}</span> 
                    </el-col>  
                </el-row>   
                <el-row>
                    <el-col :span="8">
                        <span class="colorRgba00085Blod">所在城市：</span>
                        <span v-if="info.motorcade_info !=undefined">{{info.motorcade_info.province}}-{{info.motorcade_info.city}}</span>            
                    </el-col>
                    <el-col :span="8">
                        <el-row type="flex" align="middle">
                            <span class="colorRgba00085Blod">信用值</span>
                            <toolTip :content="'初始总分=0，完成加分项总分上限可升至12，违规或被投诉，会扣除相应的分值，总分=0，禁止接单'" :color="'rgba(0,0,0,0.85)'"></toolTip>：
                            <span class="color1890FF textBlod">{{info.credit_score_owner}}分</span> 
                        </el-row>
                    </el-col>   
                    <el-col :span="8">
                        <el-row type="flex" align="middle">
                            <span class="colorRgba00085Blod">享等级</span>
                            <toolTip :content="'等级越高的车队优先接收到享包车订单的推送。在车队报价展示页标有等级标志，等级越高被预订概率增大。初始等级为1，每升一级需要获得60积分。按积分《增减标准》的规则累计积分值。'" :color="'rgba(0,0,0,0.85)'"></toolTip>：
                            <span v-if="info.motorcade_info !=undefined" class="color1890FF textBlod">{{info.motorcade_info.intergral}}级</span> 
                        </el-row>
                    </el-col>  
                </el-row>        
            </el-col>
            <el-col :span="8">
                <el-row class="left_line" type="flex" justify="end">
                    <div class="colorRgba00045 textBlod">公司资质</div>
                </el-row>
                <el-row type="flex" justify="end">
                    <div class="motorcade_type">已认证</div>
                </el-row>
            </el-col>    
       </el-row> 
       <el-row :span="8" type="flex" justify="end">
           <el-button size="medium" @click="showUpate">更新公司信息</el-button>
           <el-button type="primary" size="medium">资质认证</el-button>
       </el-row>
       <div class="tabs_box">
           <el-tabs>        
               <el-tab-pane label="个人设置">
                    <personal-setting></personal-setting>
               </el-tab-pane>
               <el-tab-pane label="员工账户">
                    <user-setting></user-setting>
               </el-tab-pane>
               <el-tab-pane label="权限设置">
                    <authority-setting></authority-setting>
               </el-tab-pane>
           </el-tabs>
       </div>

        <!-- 更新车队信息 -->
        <updateInfo ref="updateInfo"></updateInfo>

    </div>
</template>

<script>
  // 个人设置
  import personalSetting from "./components/personalSetting"
  // 员工账户
  import userSetting from "./components/userSetting"
  // 权限设置
  import authoritySetting from "./components/authoritySetting"
  // 更新车队信息
  import updateInfo from "./components/updateInfo"
  import { getIdentityInfo } from '@/api/accountSetting'
  import { parseTime } from '@/utils'
  import toolTip from '@/components/ToolTip'
  export default {
    name: 'AccountSetting',
    components: { personalSetting, userSetting, authoritySetting, updateInfo, toolTip },
    data() {
      return {
          info: "",
          tab_key: "1",
      }
    },
    created() {
        this.getIdentityInfo()
    },
    methods: {
        parseTime,
        async getIdentityInfo() {
            const { code, data } = await getIdentityInfo()
            // console.log(data)
            if(code == 200){
                this.info = data.info
            }
        },
        // 更新车队信息
        showUpate() {
            this.$refs.updateInfo.handleShow()
        },
    },
  }
</script>

<style lang="scss" scoped>
.page_container {
    padding:24px;
}

.page_title {
    padding-bottom: 16px!important;
    line-height: 28px;
    background-color: #fff;
    position: relative;
}

.pageTitleText {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.pageTitleTextH {
    color: rgba(0,0,0,.85);
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.title_tip {
    line-height: 20px;
    color: rgba(0, 0, 0, 0.25);
    font-weight: 500;
}

.left_line {
    margin-bottom:8px;
}

.colorRgba00085Blod {
    color: rgba(0, 0, 0, .85)!important;
    font-weight: 600;
}

.textBlod {
    font-weight: 600;
}

.colorRgba00045 {
    color: rgba(0, 0, 0, .45)!important;
}

.color1890FF {
    color: #1890FF!important;
    cursor: pointer;
}

.motorcade_type{
    font-size: 20px;
    color: #13C2C2;
    line-height:28px;
    font-weight: 600;
    margin-bottom: 12px;
}
</style>